<template>
  <div style="margin: 20px">
    <el-table :data="skuInfo" style="width: 100%" border>
      <el-table-column
        type="index"
        prop="prop"
        label="序号"
        width="80"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="skuName" label="名称" width="width">
      </el-table-column>
      <el-table-column prop="skuDesc" label="描述" width="width">
      </el-table-column>
      <el-table-column label="默认图片" width="120" align="center">
        <template scope="{row,$index}"
          ><img :src="row.skuDefaultImg" style="width: 100px; height: 100px"
        /></template>
      </el-table-column>
      <el-table-column prop="weight" label="重量(KG)" width="80">
      </el-table-column>
      <el-table-column prop="price" label="价格(元)" width="80">
      </el-table-column>
      <el-table-column label="操作" width="width">
        <template scope="{row,index}">
          <el-tooltip
            class="item"
            effect="dark"
            content="上架"
            placement="bottom"
            v-if="row.isSale === 0"
            ><el-button
              type="success"
              icon="el-icon-top"
              size="mini"
              @click="onSale(row)"
            ></el-button
          ></el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="下架"
            placement="bottom"
            v-else
            ><el-button
              type="info"
              icon="el-icon-bottom"
              size="mini"
              @click="cancelSale(row)"
            ></el-button
          ></el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="编辑"
            placement="bottom"
            ><el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="edit()"
            ></el-button
          ></el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="信息"
            placement="bottom"
            ><el-button
              type="info"
              icon="el-icon-info"
              size="mini"
              @click="showInfo(row.id)"
            ></el-button
          ></el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="删除"
            placement="bottom"
            ><el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
            ></el-button
          ></el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      align="center"
      background
      layout="prev, pager, next, jumper,->,total, sizes"
      :total="total"
      :page-size="limit"
      :page-sizes="[3, 5, 7, 10]"
      :current-page="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
    <el-drawer
      :visible.sync="show"
      direction="rtl"
      :before-close="handleClose"
      :show-close="false"
      size="50%"
    >
      <el-row :gutter="20">
        <el-col :span="8">名称</el-col>
        <el-col :span="16">{{ skuMessage.skuName }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">描述</el-col>
        <el-col :span="16">{{ skuMessage.skuDesc }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">价格</el-col>
        <el-col :span="16">{{ skuMessage.price }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">平台属性</el-col>
        <el-col :span="16"
          ><template
            ><el-tag
              type="success"
              v-for="(attr, index) in skuMessage.skuAttrValueList"
              :key="attr.id"
              style="margin-right: 5px"
              >{{ attr.attrId }}-{{ attr.valueId }}</el-tag
            ></template
          ></el-col
        >
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8">商品图片</el-col>
        <el-col :span="16"
          ><div
            class="block"
            style="
              width: 400px;
              border-style: solid;
              border-width: 2px;
              border-color: #6e6a70;
            "
          >
            <el-carousel height="300px">
              <el-carousel-item
                v-for="image in skuMessage.skuImageList"
                :key="image.id"
              >
                <img :src="image.imgUrl" style="width: 400px; height: 300px" />
              </el-carousel-item>
            </el-carousel></div
        ></el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'sku',
  data() {
    return {
      page: 1,
      limit: 10,
      total: 0,
      skuInfo: [],
      // 抽屉
      show: false,
      skuMessage: {}
    }
  },
  mounted() {
    this.getProductList()
  },
  methods: {
    async getProductList(pages = 1) {
      this.page = pages
      const result = await this.$api.sku.reqProductList(pages, this.limit)
      if (result.code === 200) {
        this.total = result.data.total
        this.skuInfo = result.data.records
      }
    },
    handleSizeChange(val) {
      this.limit = val
      this.getProductList()
    },
    handleCurrentChange(val) {
      this.getProductList(val)
    },
    async onSale(row) {
      const result = await this.$api.sku.reqOnSale(row.id)
      if (result.code === 200) {
        row.isSale = 1
        this.$message.success('成功上架')
      } else {
        this.$message.warning('操作失败')
      }
    },
    async cancelSale(row) {
      const result = await this.$api.sku.reqCancelSale(row.id)
      if (result.code === 200) {
        // 修改作用域插槽的值
        row.isSale = 0
        this.$message.success('成功下架')
      } else {
        this.$message.warning('操作失败')
      }
    },
    edit() {
      this.$message({
        type: 'warning',
        message: '正在开发中'
      })
    },
    async showInfo(skuId) {
      this.show = true
      const result = await this.$api.sku.reqSkuInfo(skuId)
      if (result.code === 200) {
        this.skuMessage = result.data
      }
    },
    handleClose(done) {
      done()
    }
  }
}
</script>
<style>
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
<style scoped>
.item {
  margin: 4px;
}
.el-col-8 {
  text-align: right;
  font-weight: bold;
  font-size: 25px;
}
.el-col {
  margin-bottom: 10px;
}
>>> .el-carousel__button {
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
}
</style>